/**
 * @author cqb 2016-04-05.
 * @module Accordion
 */

import React from 'react';
import classNames from 'classnames';
import Icon from '../Icon';
import './Accordion.less';

/**
 * Item Component
 */
class Item extends React.Component {
    static displayName = 'Item';

    state = {
        open: false
    }

    lastOpen = false;

    onClick = () => {
        const {onCollapse, onOpen, activeKeys, _key} = this.props;
        const index = activeKeys.split(',').indexOf(_key);
        const active = index !== -1;
        if (active) {
            onCollapse(_key);
        } else {
            onOpen(_key);
        }
    }

    componentDidMount () {
        const {activeKeys, _key} = this.props;
        const index = activeKeys.split(',').indexOf(_key);
        const active = index !== -1;
        this.setState({
            open: active
        });
        this.lastOpen = active;
    }

    componentDidUpdate () {
        if (this.lastOpen !== this.state.open) {
            if (this.state.open) {
                this.body.classList.remove('animation');
                this.body.style.height = 'auto';
                const rect = this.body.getBoundingClientRect();
                this.body.style.height = '0px';
                this.body.classList.add('animation');
                setTimeout(() => {
                    this.body.style.height = `${rect.height}px`;
                }, 0);
            } else {
                this.body.classList.add('animation');
                this.body.style.height = '0px';
            }

            this.lastOpen = this.state.open;
        }
    }

    static getDerivedStateFromProps (nextProps, state) {
        const {activeKeys, _key} = nextProps;
        const index = activeKeys.split(',').indexOf(_key);
        const active = index !== -1;
        if (active !== state.open) {
            return {
                open: active
            };
        }
        return null;
    }

    render () {
        let {className, style, icon, title, children} = this.props;

        className = classNames('cm-accordion-item', className, {
            'cm-accordion-item-active': this.state.open
        });
        return (
            <div className={className} style={style}>
                <div className='cm-accordion-item-head' onClick={this.onClick}>
                    <Icon name='chevron-right' size={13} className='cm-accordion-header-arrow mr-10'/>
                    {icon}{title}
                </div>
                <div className='cm-accordion-item-body' ref={f => this.body = f}>
                    <div className='cm-accordion-item-body-inner'>
                        {children}
                    </div>
                </div>
            </div>
        );
    }
}

/**
 * Accordion 类
 * @class Accordion
 * @constructor
 * @extend BaseComponent
 */
class Accordion extends React.Component {
    static displayName = 'Accordion';

    state = {
        activeKeys: this.props.activeKeys || ''
    }

    /**
     * 展开回调
     * @param key
     */
    onOpen (key) {
        if (this.props.multi) {
            const keys = this.props.activeKeys.split(',');
            keys.push(key);
            if (this.props.onChange) {
                this.props.onChange(keys.join(','));
            }
        } else {
            if (this.props.onChange) {
                this.props.onChange(key);
            }
        }
    }

    /**
     * 折叠回调
     * @param key
     */
    onCollapse (key) {
        if (this.props.multi) {
            const keys = this.props.activeKeys.split(',');
            const lastKeys = keys.filter(item => {
                return item !== key;
            });
        
            if (this.props.onChange) {
                this.props.onChange(lastKeys.join(','));
            }
        } else {
            if (this.props.onChange) {
                this.props.onChange('');
            }
        }
    }

    // shouldComponentUpdate (nextProps) {
    //     if (nextProps.activeKeys === this.props.activeKeys) {
    //         return false;
    //     }
    //     return true;
    // }

    renderItems () {
        const children = this.props.children;
        return React.Children.map(children, (child) => {
            let props = child.props;
            
            props = Object.assign({
                activeKeys: this.props.activeKeys || '',
                _key: child.key
            }, props, {
                onCollapse: this.onCollapse.bind(this),
                onOpen: this.onOpen.bind(this)
            });
            console.log(1);
            return React.cloneElement(child, props);
        });
    }

    render () {
        const className = classNames('cm-accordion', this.props.theme, this.props.className, {
            'cm-accordion-bordered': this.props.bordered
        });

        const items = this.renderItems();
        return (
            <div className={className} style={this.props.style}>
                <div className='cm-accordion-wrap'>
                    {items}
                </div>
            </div>
        );
    }
}

Accordion.Item = Item;

export default Accordion;
